<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>svg gradient</title>
</head>
<body>
<svg width="850px" height="300px">
    <defs>
        <radialGradient id="Gradient2" cy="60%" fx="95%" fy="70%" r="2">
            <stop offset="0%" stop-color="#ED6E46" />
            <stop offset="10%" stop-color="#b4c63b" />
            <stop offset="20%" stop-color="#ef5b2b" />
            <stop offset="30%" stop-color="#503969" />
            <stop offset="40%" stop-color="#ab6294" />
            <stop offset="50%" stop-color="#1cb98f" />
            <stop offset="60%" stop-color="#48afc1" />
            <stop offset="70%" stop-color="#b4c63b" />
            <stop offset="80%" stop-color="#ef5b2b" />
            <stop offset="90%" stop-color="#503969" />
            <stop offset="100%" stop-color="#ab6294" />
        </radialGradient>
    </defs>
    <text x="20%" y="75%" fill= "url(#Gradient2)" font-family= "'Signika', sans-serif" font-size="200">Cherry</text>
</svg>


<h2>例子2：</h2>
<svg width="850px" height="300px">
    <defs>
        <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
	        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
			<stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
			<stop offset="50%" style="stop-color:#fff;stop-opacity:1"/>
			<stop offset="100%" style="stop-color:#fff;stop-opacity:1"/>
        </linearGradient>
    </defs>
    <text x="20%" y="75%" fill= "url(#orange_red)" font-family= "'Signika', sans-serif" font-size="200">Cherry</text>
</svg>


<svg width="300.000000pt" height="218.000000pt" viewBox="0 0 300.000000 218.000000" preserveAspectRatio="xMidYMid meet">
    <defs>
        <linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
	        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
			<stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
			<stop offset="50%" style="stop-color:#fff;stop-opacity:1"/>
			<stop offset="100%" style="stop-color:#fff;stop-opacity:1"/>
        </linearGradient>
    </defs>

	<g transform="translate(0.000000,218.000000) scale(0.100000,-0.100000)" fill= "url(#orange_red)"  stroke="none">
		<path  d="M782 2063 c-23 -60 -64 -169 -92 -243 -28 -74 -64 -169 -80 -210 -16 -41 -73 -190 -126 -330 -53 -140 -123 -325 -156 -410 -33 -85 -70 -184 -83 -220 -13 -36 -43 -117 -68 -180 -87 -225 -177 -462 -177 -466 0 -2 488 -4 1084 -4 l1084 0 40 102 c23 57 55 141 72 188 42 113 90 240 189 500 45 118 98 256 116 305 19 50 59 155 90 235 31 80 65 170 76 200 10 30 33 89 49 130 43 109 177 461 185 488 l6 22 -1084 0 -1084 0 -41 -107z" id="node1" class="node" stroke-width="20"/>
	</g>
</svg>

<svg widt="400px" viewBox="0 0 600 300">
				  
	  <!-- Pattern -->
	  <pattern id="p-fire" viewBox="30 100 186 200" patternUnits="userSpaceOnUse" width="216" height="200" x="-70" y="35">
	    
	    <!-- Fire -->
	    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://demo.htmleaf.com/1502/201502182149/img/fire.gif" width="256" height="300"></image>
	  </pattern>
	  
	  <!-- Text -->
	  <text text-anchor="middle" x="50%" y="50%" dy=".35em" style='fill: url("#p-fire");
    stroke: #330000;
    stroke-width: 8;
    stroke-opacity: 0.5;font: 800 14.5em/1 "Open Sans", Impact;' class="text">
	      Text
	    </text>
	  
	</svg>
</body>
</html>